<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item @click="back()">Back</a-breadcrumb-item>
    </a-breadcrumb>
    <a-list item-layout="horizontal" :data-source="fileList" :pagination="pagination">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta :description="item.size">
            <template #title>
              <div>
                <a @click="updateFileList(item)" :class="{ 'disabled': !item.dir }">{{ item.path }}</a>
                <!-- params 传参被弃用（刷新问题)，使用 query 传参-->
                <router-link :to="{ name: 'player', query: { path: item.path } }" v-if="item.type === 'video'"> 播放
                </router-link>
              </div>
            </template>
            <!-- <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" />
          </template> -->
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref, onActivated } from 'vue';
import { type FileInfo, getFileList } from '@/http/fileshower';


// 假设这是从后端或其他地方获取的文件列表数据  

// 使用 ref 创建响应式的数据源  
const fileList: Ref<FileInfo[]> = ref([]);
const pagination = {
  onChange: (page: number) => {
    console.log('Page: ', page);
  },
  hideOnSinglePage: true,
  showTotal: (total: number) => "共 " + total + " 个",
};
var currentPath: string | null = null;

function updateFileList(fileInfo: FileInfo | null) {
  if (fileInfo != null && !fileInfo.dir) {
    console.log("path is a file not a directory!");
    return;
  }
  currentPath = fileInfo?.path ?? null;
  // 如果使用 await，则需要使用 onBeforeMount hook 执行 updateFileList 函数
  fillValue();
}

function fillValue() {
  getFileList(currentPath).then(rs => {
    fileList.value = rs.data.filter(item => item.type === 'video' || item.dir);
  }).catch(error => {
    console.error('An error occurred:', error);
  });
}

function back() {
  if (currentPath != null) {
    if (currentPath.lastIndexOf("\\") == currentPath.length -1 ){
      currentPath = currentPath.slice(0, currentPath.length - 1);
    }
    const paths = currentPath.split("\\");
    if (paths.length == 1) {
      currentPath = null;
    } else {
      currentPath = paths.slice(0, paths.length - 1).join("\\");
    }
  }
  console.log("back to: " + currentPath);
  fillValue();
}

updateFileList(currentPath);

// 调用时机为首次挂载  以及每次从缓存中被重新插入时
onActivated(() => {
})

</script>

<style scoped>
.disabled {
  pointer-events: none;
  /* 阻止鼠标事件 */
  opacity: 0.5;
  /* 可选：降低透明度以视觉表示链接被禁用 */
  color: black;
  cursor: not-allowed;
  /* 可选：改变鼠标样式为禁止样式 */
}
</style>